<template>
    <div>
        <div class="shopcart">
            <div class="content" @click="toggleList">
                <div class="content_left">
                    <div class="logo_wapper">
                        <div class="logo" :class="{'highlight':totalCount>0}">
                            <span></span>
                        </div>
                        <div class="num" v-show="totalCount>0">{{totalCount}}</div>
                    </div>
                    <div class="price" :class="{'highlight':totalCount>0}">￥{{totalPrice}}</div>
                    <div class="desc">另需配送费￥{{deliveryPrice}}元</div>
                </div>
                <div class="content_right" @click.stop.prevent="pay">
                    <div class="pay" :class="payClass">{{payDesc}}</div>
                </div>
            </div>
            <div class="ball_container">
                <div v-for="ball in balls">
                    <transition name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop">
                        <div class="ball" v-show="ball.show">
                            <div class="inner"></div>
                        </div>
                    </transition>
                </div>
            </div>
            <transition name="fold">
                <div class="shopcart_list" v-show="listshow">
                    <div class="list_header">
                        <h1 class="title">购物车</h1>
                        <span class="empty" @click="empty">清空</span>
                    </div>
                    <div class="list_content" ref="listContent">
                        <ul>
                            <li class="food" v-for="food in selectFoods">
                                <span class="name">{{food.name}}</span>
                                <div class="price">
                                    <span>￥{{food.price*food.count}}</span>
                                </div>
                                <div class="cartcontrol_wrapper">
                                    <cartcontrol :food="food"></cartcontrol>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </transition>
        </div>
        <transition name="fade">
            <div class="list_mask" v-show="listshow" @click="hidelist"></div>
        </transition>
    </div>
</template>

<script>
import BScroll from 'better-scroll';
import cartcontrol from '@/components/cartcontrol/cartcontrol.vue';
export default {
    props: {
        selectFoods: {
            type: Array,
            default() {
                return [

                ];
            }
        },
        deliveryPrice: {
            type: Number,
            default: 0
        },
        minPrice: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            balls: [
                {
                    show: false
                },
                {
                    show: false
                },
                {
                    show: false
                },
                {
                    show: false
                },
                {
                    show: false
                },
            ],
            dropBalls: [],
            fold: true
        }
    },
    computed: {
        totalPrice() {
            let total = 0;
            this.selectFoods.forEach((food) => {
                total += food.price * food.count;
            });
            return total;
        },
        totalCount() {
            let count = 0;
            this.selectFoods.forEach((food) => {
                count += food.count;
            });
            return count;
        },
        payDesc() {
            if (this.totalPrice === 0) {
                return `￥${this.minPrice}元起送`;
            } else if (this.totalPrice < this.minPrice) {
                let diff = this.minPrice - this.totalPrice;
                return `还差￥${diff}元起送`;
            } else {
                return '去结算';
            }
        },
        payClass() {
            if (this.totalPrice < this.minPrice || this.totalPrice === 0) {
                return 'not-enough';
            } else {
                return 'enough';
            }
        },
        listshow() {
            if (!this.totalCount) {
                this.fold = true;
                return false;
            }
            let show = !this.fold;
            if (show) {
                this.$nextTick(() => {
                    if (!this.scroll) {
                        this.scroll = new BScroll(this.$refs.listContent, {
                            click: true
                        });
                    } else {
                        this.scroll.refresh();
                    }
                })
            }
            return show;
        }
    },
    methods: {
        drop(el) {
            for (let i = 0; i < this.balls.length; i++) {
                let ball = this.balls[i];
                if (!ball.show) {
                    ball.show = true;
                    ball.el = el;
                    this.dropBalls.push(ball);
                    return;
                }
            }
        },
        beforeDrop(el) {
            let count = this.balls.length;
            while (count--) {
                let ball = this.balls[count];
                if (ball.show) {
                    let rect = ball.el.getBoundingClientRect();
                    let x = rect.left - 32;
                    let y = -(window.innerHeight - rect.top - 22);
                    el.style.display = '';
                    el.style.webkitTransform = `translate3d(0,${y}px,0)`;
                    el.style.transform = `translate3d(0,${y}px,0)`;
                    let inner = el.getElementsByClassName('inner')[0];
                    inner.style.webkitTransform = `translate3d(${x}px,0,0)`;
                    inner.style.transform = `translate3d(${x}px,0,0)`;
                }
            }
        },
        dropping(el, done) {
            /* eslint-disable no-unused-vars */
            let rf = el.offsetHeight;
            this.$nextTick(() => {
                el.style.webkitTransform = 'translate3d(0,0,0)';
                el.style.transform = 'translate3d(0,0,0)';
                let inner = el.getElementsByClassName('inner')[0];
                inner.style.webkitTransform = 'translate3d(0,0,0)';
                inner.style.transform = 'translate3d(0,0,0)';
                el.addEventListener('transitionend', done);
            });
        },
        afterDrop(el) {
            let ball = this.dropBalls.shift();
            if (ball) {
                ball.show = false;
                el.style.display = 'none';
            }
        },
        toggleList() {
            if (!this.totalCount) {
                return;
            }
            this.fold = !this.fold;
        },
        empty() {
            this.selectFoods.forEach((food) => {
                food.count = 0;
            })
        },
        hidelist() {
            this.fold = true;
        },
        pay() {
            if (this.totalPrice < this.minPrice) {
                return;
            }
            alert(`支付${this.totalPrice}元`);
        }
    },
    components: {
        cartcontrol
    }
};
</script>

<style scoped>
.shopcart {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 50;
    width: 100%;
    height: 46px;
}

.content {
    display: flex;
    background: #141d27;
    color: #dbdbdb;
}

.content_left {
    flex: 1;
}

.content_left .logo_wapper {
    display: inline-block;
    position: relative;
    top: -10px;
    margin: 0 12px;
    padding: 6px;
    width: 56px;
    height: 56px;
    box-sizing: border-box;
    background: #141d27;
    border-radius: 50%;
    vertical-align: top;
}

.content_left .logo_wapper .logo.highlight {
    background: rgb(0, 160, 220)
}

.content_left .logo_wapper .logo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #dbdbdb;
}

.num {
    position: absolute;
    top: 0;
    right: 0;
    width: 24px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 16px;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    background: rgb(240, 20, 20);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
}

.content_left .price {
    display: inline-block;
    vertical-align: top;
    margin-top: 12px;
    line-height: 24px;
    padding-right: 12px;
    box-sizing: border-box;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 16px;
    font-weight: 700;
}

.content_left .price.highlight {
    color: #fff;
}

.content_left .desc {
    display: inline-block;
    vertical-align: top;
    margin: 12px 0 0 12px;
    line-height: 24px;
    font-size: 10px;
}

.content_right {
    flex: 0 0 105px;
    width: 105px;
}

.pay {
    height: 48px;
    line-height: 48px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
}

.pay.not-enough {
    background: #2b333b
}

.pay.enough {
    background: #00b43c;
    color: #fff
}

.ball_container .ball {
    position: fixed;
    left: 32px;
    bottom: 22px;
    z-index: 200;
    transition: all 0.6s cubic-bezier(0.49, -0.29, 0.75, 0.41);
}

.ball_container .ball .inner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgb(0, 160, 220);
    transition: all 0.6s linear;
}

.shopcart_list {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    transform: translate3d(0, -100%, 0);
}

.shopcart_list.fold-enter-active,
.shopcart_list.fold-leave-active {
    transition: all 0.5s
}

.shopcart_list.fold-enter,
.shopcart_list.fold-leave-active {
    transform: translate3d(0, 0, 0)
}

.shopcart_list .list_header {
    height: 40px;
    line-height: 40px;
    padding: 0 18px;
    background: #f3f5f7;
    border-bottom: 1px solid rgba(7, 17, 27, 0.1);
}

.shopcart_list .list_header .title {
    float: left;
    font-size: 14px;
    color: rgb(7, 17, 27);
}

.shopcart_list .list_header .empty {
    float: right;
    font-size: 12px;
    color: rgb(0, 160, 220);
}

.shopcart_list .list_content {
    padding: 0 18px;
    max-height: 217px;
    overflow: hidden;
    background: #fff;
}

.shopcart_list .list_content .food {
    position: relative;
    padding: 12px 0;
    box-sizing: border-box;
}

.shopcart_list .list_content .name {
    line-height: 24px;
    font-size: 14px;
    color: rgb(7, 17, 27);
}

.shopcart_list .list_content .price {
    position: absolute;
    right: 90px;
    bottom: 12px;
    line-height: 24px;
    font-size: 14px;
    font-weight: 700;
    color: rgb(240, 20, 20);
}

.shopcart_list .list_content .cartcontrol_wrapper {
    position: absolute;
    right: 0;
    bottom: 12px;
}

.list_mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 40;
    backdrop-filter: blur(10px);
    opacity: 1;
    background: rgba(7, 17, 27, 0.6);
}

.list_mask.fade-enter-active,
.list_mask.fade-leave-active {
    transition: all 0.5s
}

.list_mask.fade-enter,
.list_mask.fade-leave-active {
    opacity: 0;
    background: rgba(7, 17, 27, 0)
}
</style>
